<template>
    <div class="advertPositionDetails">
        <el-card>
            <el-form ref="form" :rules="rules" :model="formData" label-width="100px">
                <el-form-item label="广告位名称" prop="title">
                    <el-input v-model="formData.title" placeholder="请填写广告位名称" style="max-width: 260px"></el-input>
                </el-form-item>
                <el-form-item label="最多展示数" prop="maximum">
                    <el-input v-model="formData.maximum" placeholder="请填写最多展示数" style="max-width: 260px"></el-input>
                </el-form-item>
                <el-form-item label="宽度" prop="width">
                    <el-input v-model="formData.width" placeholder="请填写宽度（格式： 数字）" style="max-width: 260px"></el-input>
                </el-form-item>
                <el-form-item label="高度" prop="height">
                    <el-input v-model="formData.height" placeholder="请填写高度（格式： 数字）" style="max-width: 260px"></el-input>
                </el-form-item>
                <el-form-item label="描述" prop="desc">
                    <el-input v-model="formData.desc" style="max-width: 260px" placeholder="请填写描述内容" ></el-input>
                </el-form-item>
                
                <el-form-item label="状态" prop="status">
                    <el-radio-group v-model="formData.status">
                        <el-radio :label="1">启用</el-radio>
                        <el-radio :label="0">禁用</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">提交</el-button>
                    <el-button>取消</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>

<script>
import {changeTitleMinin} from '@/mixin';
import http from '@/api/ad_position'
export default {
    name: 'advertPositionDetails',
    mixins: [changeTitleMinin],
    data() {
        return {
            formData: {},
            is_add: true,
            rules: {
                title: [
                    { required: true, message: '请填写广告位名称' }
                ],
                maximum: [
                    { required: true, message: '请填写最多展示数' },
                    { pattern: /^\d{1,}$/, message: '只能输入数字' }
                ],
                width: [
                    { required: true, message: '请填写宽度' },
                    { pattern: /^\d{1,}$/, message: '只能输入数字' }
                ],
                height: [
                    { required: true, message: '请填写高度' },
                    { pattern: /^\d{1,}$/, message: '只能输入数字' }
                ],
                desc: [
                    { required: true, message: '请填写描述' }
                ],
                status: [
                    { required: true, message: '请选择状态' }
                ]
            },
        }
    },
    methods: {
        onSubmit(){
            console.log('this.formData:',this.formData);
            this.$refs['form'].validate((valid) => {
                if(valid){
                    let formData = JSON.parse(JSON.stringify(this.formData));
                    if(this.is_add){
                        formData.center_id = JSON.parse(sessionStorage.getItem('user')).center_id;
                    }
                    if(this.is_add){
                        http.createContent(formData).then(res => {
                            this.$message.success(res.msg || ('新增成功！'));
                            this.$router.push({name: 'advertPositionManage'});
                        })
                    } else {
                        http.editContent(formData).then(res => {
                            this.$message.success(res.msg || ('编辑成功！'));
                            this.$router.push({name: 'advertPositionManage'});
                        })
                    }
                    
                }
            })
        },
        getContentDetail(id){
            http.getContentDetail({id}).then(res => {
                this.formData = res.data;
            })
        },
        getPageParams(){
            if(Object.keys(this.$route.params).length){
                sessionStorage.setItem('advertPositionDetailsParams',JSON.stringify(this.$route.params))
            }

            let pageParams = sessionStorage.getItem('advertPositionDetailsParams');
            if(pageParams){
                pageParams = JSON.parse(pageParams);
                this.is_add = pageParams.pageType=='create'?true:false;

                if(pageParams.id){
                    this.getContentDetail(pageParams.id);
                }
            }
        }
    },
    created(){
        this.getPageParams();
    }
}
</script>

<style lang="scss" scoped>
.advertPositionDetails{
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
    overflow: auto;
    &::-webkit-scrollbar {
        width: 6px;
        height: 6px;
        cursor: pointer;
        background: #f1f1f1;
    }

    &::-moz-scrollbar {
        display: none;
    }
    &::-ms-scrollbar {
        display: none;
    }
    &::-o-scrollbar {
        display: none;
    }

    &::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
        border-radius: 10px;
        width: 10px;
        cursor: pointer;
        background: #bbb;
    }
    &::-webkit-scrollbar-track {/*滚动条里面轨道*/
        border-radius: 0px;
        background: #f1f1f1;
    }
    .opt_wrap{
        padding: 0px 30px;
    }
    .search_wrap{
        padding: 20px 30px;
    }
    .table_list{
        padding: 0px 10px;
    }
}
</style>